<template>
 		<div class="container">
			<div>
				<!-- <input type="text" placeholder="查询药品" @input="search" list="cars" class="search">
				<datalist id="cars">
                <option v-for="item in searchlist" :value="item"></option>
            </datalist> -->
				
        
        <input type="button" class="add btn" @click="add" value="新增">
			</div>
			<div>
				<table>
				<thead>
          	<tr>
						<th>编号</th>
						<th>用户名</th>
						<th>密码</th>
						<th>电话</th>
						<th>地址</th>
						<th>操作</th>
					</tr>
        </thead>
         
					<tbody>
            <tr v-cloak v-for="(item, index) of slist" >
						<td>{{index+1}}</td>
						<td>{{item.name}}<span v-if="index==0" class="red">管理员</span></td>
						<td>{{item.password}}</td>
						<td>{{item.phone}}</td>
						<td>{{item.site}}</td>
				
						<td v-if="index==0">
							
              <!-- {{item.id}} -->
						</td>
            <td v-else>
              <a href="javascript:;" @click="showOverlay(index)">修改</a> |
							<a href="javascript:;" @click="del(index,item.id)">删除</a>
              <!-- {{item.id}} -->
            </td>
					</tr>
          </tbody>
				</table>
			</div>
			<model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
		
		
    </div>
	
</template>

<script>
import model from "@/components/setmodel";
export default {
  name: "drugs",
  components: {
    model
  },
  mounted() {
    //测试实时监听更新数据，与后台接口联系
  },
  data() {
    return {
      isActive: false,
      selected: -1,
      selectedlist: {},
      slist: [],
      searchlist: [],
      list: [
        //  {
        //     name: "张大狗",
        //     password: "123456",
        //     phone: "15234678523",
        //     site: "北京市"
        //   }
      ]
    };
  },
  created() {
    this.setSlist(this.list);
  },
  mounted() {
    this.$nextTick(function() {
      this.getList();
    });
  },
  methods: {
    //获取数据列表
    getList() {
      // let params = new URLSearchParams();
      // params.append("userid", JSON.parse(localStorage.user).userid);
      // params.append("level", JSON.parse(localStorage.user).level);
      this.$http
        .post(
          "http://medical.qingguo188.com/user/userslist",
          {
            userid: JSON.parse(localStorage.user).userid,
            level: JSON.parse(localStorage.user).level
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            for (let i = 0; i < rester.data.$message.length; i++) {
              this.list.push({
                name: rester.data.$message[i].name,
                password: rester.data.$message[i].password,
                phone: rester.data.$message[i].phone,
                site: rester.data.$message[i].site,
                id: rester.data.$message[i].id
              });
            }
            this.setSlist(this.list);
            //  console.log(this.list);
          },
          function() {
            this.$layer.alert("网络错误！");
          }
        );
    },
    // 修改数据
    showOverlay(index) {
      this.selected = index;
      this.selectedlist = this.list[index];
      this.changeOverlay();
    },
    // 点击保存按钮
    modify(arr) {
      var _this = this;
      if (this.selected > -1) {
        //这里是修改

        //let params = new URLSearchParams();
        // params.append("name", arr.name);
        // params.append("password", arr.password);
        // params.append("phone", arr.phone);
        // params.append("site", arr.site);
        // params.append("userid", JSON.parse(localStorage.user).userid);
        // params.append("id", arr.id);
        this.$http
          .post(
            "http://medical.qingguo188.com/user-secondary/changemessage",
            {
              name: arr.name,
              password: arr.password,
              phone: arr.phone,
              site: arr.site,
              userid: JSON.parse(localStorage.user).userid,
              id: arr.id
            },
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(
            rester => {
              if (rester.data.status == 1) {
                this.$set(this.list, this.selected, arr);
                _this.$layer.msg("修改成功");
              } else {
                _this.$layer.msg("修改失败！");
              }
            },
            function() {
              this.$layer.alert("网络错误！");
            }
          );
      } else {
        //下面新增
        //let params = new URLSearchParams();
        // params.append("name", arr.name);
        // params.append("password", arr.password);
        // params.append("phone", arr.phone);
        // params.append("site", arr.site);
        // params.append("userid", JSON.parse(localStorage.user).userid);
        this.$http
          .post(
            "http://medical.qingguo188.com/user-secondary/addseconduser",
            {
              name: arr.name,
              password: arr.password,
              phone: arr.phone,
              site: arr.site,
              userid: JSON.parse(localStorage.user).userid
            },
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(
            rester => {
              if (rester.data.status == 1) {
                arr.id = rester.data.$message.id;
                this.list.push(arr); //这里是新增
                console.log(arr);

                this.setSlist(this.list);
                //location.reload()强制刷新页面
              } else {
              }
            },
            function() {
              this.$layer.alert("网络错误！");
            }
          );
      }
      this.setSlist(this.list);
      this.changeOverlay();
    },
    add: function() {
      this.selectedlist = {
        name: "",
        password: "",
        phone: "",
        site: ""
      };
      this.isActive = true;
    },
    // delete list in index location
    del(index, delid) {
      // if (index == 0) {
      //   this.$layer.msg("您是管理员！"); //删除用户
      // } else {
      //   this.$layer.msg("删除成功！");
      // }
      var _this = this;
      // let params = new URLSearchParams();
      // params.append("id", delid);
      this.$http
        .post(
          "http://medical.qingguo188.com/user-secondary/dodelete",
          {
            id: delid
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            if (rester.data.status == 1) {
              this.list.splice(index, 1);
              this.setSlist(this.list);
              _this.$layer.msg("删除成功");
            } else {
              _this.$layer.msg("删除失败！");
            }
          },
          function() {
            this.$layer.alert("网络错误！");
          }
        );
    },
    changeOverlay() {
      this.isActive = !this.isActive;
    },
    // 获取需要渲染到页面中的数据
    setSlist(arr) {
      this.slist = JSON.parse(JSON.stringify(arr));
    }
    // 搜索
    // search(e) {
    //   var v = e.target.value,
    //     self = this;
    //   self.searchlist = [];
    //   if (v) {
    //     var ss = [];
    //     // 过滤需要的数据
    //     this.list.forEach(function(item) {
    //       if (item.username.indexOf(v) > -1||item.pinyin.indexOf(v) > -1) {
    //         if (self.searchlist.indexOf(item.username) == -1||self.searchlist.indexOf(item.pinyin) == -1) {
    //           self.searchlist.push(item.username);
    //         }
    //         ss.push(item);
    //       } else if (item.tname.indexOf(v) > -1) {
    //         if (self.searchlist.indexOf(item.tname) == -1) {
    //           self.searchlist.push(item.tname);
    //         }
    //         ss.push(item);
    //       }
    //     });
    //     this.setSlist(ss); // 将过滤后的数据给了slist
    //     this.list = ss;
    //   } else {
    //     // 没有搜索内容，则展示全部数据
    //     this.setSlist(this.list);
    //   }
    // }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
[v-cloak] {
  display: ncompony;
}
/* tbody tr:nth-child(1) td{
} */
.red {
  display: inline-block;
  color: white;
  background: orangered;
  height: 20px;
  line-height: 20px;
  top: 5px;
  padding: 0 5px;
  right: 20px;
  position: absolute;
}
input[type="button"] {
  margin: 0 10px;
}
table {
  border: 1px solid #ccc;
  padding: 0;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 10px;
  width: 100%;
}

table td,
table th {
  position: relative;
  border: 1px solid #ccc;
  background: #fff;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

table th:first-child {
  width: 30px;
}

.container,
.st {
  width: 1200px;
  margin: 10px auto 0;
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

.container .add {
  padding: 5px 15px;
}
table th {
  background: #dedede;
}
table tbody tr:first-child td {
  background: #f1f1f1;
}
</style>
